{include file="common/head"/}
<body class="layui-layout-body">
<style>
    .layui-bg-black {background-color: white !important;}
    .layui-nav  {background-color: #ffffff;}
    .layui-colla-content, .layui-colla-item, .layui-collapse{border-color: #fbfbfb;}
    .layui-colla-title {height: 35px;line-height: 35px;padding: 0;color:#333;}
    .layui-tab-title {position: relative;left: 0;height: 40px;white-space: nowrap;font-size: 0;border-bottom-width: 1px;transition: all .2s;-webkit-transition: all .2s;}
    .layui-nav-tree .layui-nav-item{overflow: hidden;}
    .layui-colla-content, .layui-colla-item, .layui-collapse{overflow: hidden;}
    .layui-nav-tree .layui-nav-item a{height: 35px;line-height: 35px;}
    .layui-colla-title:hover{background-color: #e8f9f4;color:#333;}
    .layui-nav-tree .layui-nav-item a:hover{background-color: #e8f9f4;color:#333;}
    .layui-colla-content{padding: 0;}
    .layui-nav .layui-nav-item a{color:#333;}
    .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover{background-color: #009688;color:#fff;}
    .layui-collapse{border-width:0;}
    .layui-colla-content{border-top-width:0;}
</style>

<div>

    <!--头部内容-->
    <div style="margin-left: 16px;margin-right: 16px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>部门列表</legend>
        </fieldset>
    </div>

    <!--左导航栏-->
    <div >
        <div class="layui-side layui-bg-black" style="margin-top: 55px;margin-left: 16px;">
            <div class="layui-side-scroll" style="background-color: #f2f2f2;margin-left: -5px;">
                <!-- 左侧垂直导航区域-->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" >
                    {foreach name="section_list" item="val" key="key"}
                    <li class="layui-nav-item layui-collapse"  lay-accordion="" style="border-bottom: 0.5px solid #fff;">
                        <div class="layui-collapse" lay-accordion="" >
                            {if $val.pid==0}
                            <div class="layui-colla-item layui-show" style="width: 97%;float: right" id="{$val.section_id}">
                                <h2 class="layui-colla-title">
                                    <a  href="javascript:;" data-id="{$val.section_id}" data-title="{$val.title}" data-url="{:url('lists')}"  class="site-demo-active nav-item" data-type="tabAdd" >{$val.title}</a>
                                </h2>
                            </div>
                            {/if}
                        </div>
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
    </div>

    <!--右边内容-->
    <div>
        <div class="admin-main layui-anim layui-anim-upbit" style="margin-left: 225px;">
            <!--tab标签-->
            <table class="layui-table" id="test" lay-filter="test" lay-data="{id: 'idTest'}"></table>
        </div>
    </div>

</div>
{include file="common/foot"/}
<script type="text/html" id="sex">
    {{# if(d.sex=='1'){ }}
    男
    {{# }else if(d.sex=='2'){ }}
    女
    {{# }else{ }}
    保密
    {{# } }}
</script>

<script>
    layui.use(['element', 'layer', 'jquery','table'], function () {
        var element = layui.element, table = layui.table, form = layui.form;
        var $ = layui.$;
        var arr = new Array();
        var tablein = table.render({
            id: 'idTest',
            elem: '#test',
            url: "{:url('lists')}",
            page: true,
            limit:10,
            cols: [[
                {field: 'title', title: '部门名称', width: 150, fixed: 'left'}
                , {field: 'teacher_no', title: '教师工号', width: 150, fixed: 'left'}
                , {field: 'true_name', title: '教师姓名', width: 150, fixed: 'left'}
                , {field: 'sex', title: '性别', width: 100,templet:'#sex'}
                , {field: 'mobile', title: '手机号', width: 150}
                , {field: 'add_parentname', title: '创建人', width: 150}
                , {field: 'create_time', title: '创建时间', width: 200}
                , {field: 'update_time', title: '更新时间', width: 200}

            ]]
        });

        $(document).on('click','.nav-item',function () {
            var id=$(this).attr('data-id');
            tablein.reload({
                where: {id:id}
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

        });

        // 配置tab实践在下面无法获取到菜单元素
        $('.site-demo-active').on('click', function () {

            showdemo($(this));

        });
        function showdemo(that) {

            var dataid = that;
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
            active.showtab(dataid);
        }

        var active = {
            showtab: function (dataid) {

                if($.inArray(dataid.attr("data-id"),arr)==-1){
                    loading =layer.load(1, {shade: [0.1,'#fff']});
                    $.post('{:url("show_child")}',{section_id:dataid.attr("data-id")},function (res) {
                        if($.inArray(dataid.attr("data-id"),arr)==-1){

                            var str = '';
                            var str ="<div class=\"layui-colla-content layui-show\">";
                            for (var i=0;i<res.length;i++) {
                                str=str+ "<div class=\"layui-collapse\" lay-accordion=\"\"><div class=\"layui-colla-item layui-show\" style=\"border-bottom: 0.5px solid #fff;width: 95%;float: right\"  id=\""+res[i]['section_id']+"\">\n" +
                                    "     <h2 class=\"layui-colla-title\">\n" +
                                    "            <a href=\"javascript:;\" data-id=\""+res[i]['section_id']+"\" data-title=\""+res[i]['title']+"\" data-url=\"{:url('lists')}\"\n" +
                                    "               class=\"site-demo-active nav-item\" data-type=\"tabAdd\">"+res[i]['title']+"</a>\n" +
                                    "        </h2>\n" +
                                    "    </div></div>";
                            }
                            str=str+ " </div>";

                            $('#'+dataid.attr("data-id")).append(str);
                            arr.push(dataid.attr("data-id"));
                            layer.close(loading);
                            $('.site-demo-active').on('click', function () {
                                $('.layui-colla-title').removeClass('layui-this');
                                $('.nav-item').removeClass('layui-this');
                                $(this).addClass('layui-this');
                                showdemo($(this));

                            });
                        }

                    });
                }

            },

            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                element.tabAdd('demo', {
                    title: name,
                    content: '<div data-frameid="' + id + '" scrolling="auto" frameborder="0" style="width:100%;height:99%;border:1px solid red;">'+id+'</div>',
                    // content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id //规定好的id
                });
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            },

        };
    });

</script>

</body>
